import styled from '@/styled-px2vw'

const imgBgMinxin = `
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
`

const hCenter = `
  display: flex;
  align-items:center;
`
export const Hcenter = styled.div`${hCenter}`

export const BlockItemInfoTagText = styled.div`
  font-family: PingFangSC-Regular;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  color: #777777;
`
export const BlockItemInfoTagAge = styled.div`
	font-family: PingFangSC-Medium;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 12px;
	letter-spacing: 0px;
	color:${({ gender }) => gender == 'girl' ? '#ff7878' : '#317efc'};
`
export const BlockItemInfoTagGender = styled.div`
  width: 12px;
  height: 12px;
  background-image:url(${({ gender }) => gender == 'girl' ? require('./imgs/girl.png') : require('./imgs/boy.png')});
  ${imgBgMinxin}
`
export const BlockItemInfoTag = styled.div`
  width: 42px;
  height: 16px;
  background-color:${({ gender }) => gender == 'girl' ? '#ffe2e2' : '#e2edff'};
  border-radius: 10px;
  padding: 2px 5px;
  justify-content: space-between;
  box-sizing: border-box;
  margin-right: 5px;
  ${hCenter}
`
export const BlockItemInfoUserName = styled.div`
  font-family: PingFangSC-Medium;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 14px;
  letter-spacing: 0px;
  color: #141516;
`
export const BlockItemInfo = styled.div`
  width: 100%;
  height: 54px;
  background-color: #ffffff;
  padding:8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
`
export const BlockItemImg = styled.div`
  width: 100%;
  height: 234px;
  background-image:url(${({ imgSrc }) => imgSrc});
  ${imgBgMinxin}
`
export const BlockItem = styled.div`
  width: 176px;
  height: 288px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
`